<template>
  <div>
    <a-modal
      :visible="visible"
      title="业户人员配置"
      @cancel="handleCancel"
      @ok="handleOk"
    >
      <div class="content">
        <div class="left">
          <div
            class="type-item"
            v-for="setting in settingTypes"
            :key="setting.key"
            :class="activeKey == setting.key ? 'active' : ''"
          >
            {{ setting.name }}
          </div>
        </div>
        <div class="right">
          <template v-if="activeKey === 'staff_edit_approval'">
            开启审批
            <TextTip
              :tips="[
                `1.当开启审核，则会在该机构的审批应用中创建一个内置的”业户个人资料修改审批“`,
                '2.只有开启了审批，业户个人资料修改才会进入审批流程。',
              ]"
            />
            <div class="mt-10">
              <a-switch
                style="margin-bottom: 30px"
                v-model:checked="checkedConfig"
                checked-children="开"
                un-checked-children="关"
                @change="switchChange"
              />
            </div>
          </template>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { reactive, ref, watch, toRefs } from "vue";
import request from "../../../../common/utils/request";
import { message } from "ant-design-vue";
import { TextTip } from "bl-common-vue3";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    TextTip,
  },
  setup(props, context) {
    const state = reactive({
      settingTypes: [
        {
          name: "业户人员修改信息",
          key: "staff_edit_approval",
        },
      ],
      activeKey: "staff_edit_approval",
    });

    const getConfigInfo = () => {
      request
        .get("/org", "/owner/config/info", {
          config_name: state.activeKey,
        })
        .then((res) => {
          console.log(res);
          if (res.list) {
            const config_value = res.list.config_value;
            checkedConfig.value = config_value == "open" ? true : false;
          }
        })
        .catch((e) => {
          console.log("e", e);
        });
    };

    const editConfigInfo = () => {
      request
        .post("/org", "/owner/config/info", {
          config_name: state.activeKey,
          config_set: checkedConfig.value ? "open" : "close",
        })
        .then((res) => {
          // console.log(res);
          message.success(res.msg);
          context.emit("commit");
        })
        .catch((e) => {
          console.log("e", e);
        });
    };

    const handleOk = () => {
      editConfigInfo();
    };
    const handleCancel = () => {
      context.emit("cancel");
    };

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          //   loading.value = false;
        }
        getConfigInfo();
      }
    );

    const checkedConfig = ref(false);
    watch(
      () => props.checked,
      (val) => {
        checkedConfig.value = val;
      }
    );
    const switchChange = (val) => {
      checkedConfig.value = val;
      console.log(checkedConfig.value);
    };

    return {
      handleOk,
      handleCancel,
      checkedConfig,
      switchChange,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;

  .left {
    width: 146px;
    border-right: 1px solid #f0f0f0;
    padding-right: 16px;
  }

  .right {
    flex: 1;
    margin-left: 16px;
  }
  .type-item {
    width: 100%;
    margin-bottom: 16px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
  }

  .active {
    background-color: @primary-color;
    border-color: @primary-color;
    color: #fff;
  }
}
</style>
